<template>
  <div class="aggregatePage">
    <el-tabs v-model="tabsName">
      <!-- 集结流程介绍 -->
      <el-tab-pane name="0">
        <span slot="label"><i class="el-icon-user"></i>融合原理介绍</span>
        <!-- <div class="borderSingle singlePadding">
          <el-image :src="require('../../assets/aggregatePage/singleprocess.jpg')" style="pointer-events: none;user-select:none;margin-left:5% ;"></el-image>
        </div> -->
        <div class="borderSingle singlePadding">
          <h3>融合算子原理介绍</h3>
          <h4>1:</h4>
          <h4>2:</h4>
          <h4>3:</h4>
          <h4>4:</h4>
          <h4>5:</h4>
        </div>
      </el-tab-pane>

      <!-- 集结算子 -->
      <el-tab-pane name="1">
        <span slot="label"><i class="el-icon-user"></i> 算子</span>
        <div class="borderSingle singlePadding">
          <h3>融合算子选择</h3>
          <el-form ref="form" :model="aggregateForm" label-width="80px" :inline="true">
            <el-form-item >
              <!-- <el-radio-group v-model="aggregateForm.operator">
                <el-radio v-for="item in operatorsShow" :key="item" :label="item" :value="item" style="width:20%;margin:5px 0"></el-radio>
                <label 
                  v-if="operators.length != operatorsShow.length" 
                  role="radio" class="el-radio hoverLabelColor"
                  style="width: 120px; margin: 20px 85%;" 
                  @click="showOperatorMore">
                  more...</label>
              </el-radio-group> -->
              <el-checkbox-group v-model="aggregateForm.combineOperators" @change="groupChange">
                <el-checkbox v-for="item in operatorsShow" :key="item" :label="item" :value="item"   style="width:20%;margin:5px 0"></el-checkbox>
                <label 
                  v-if="operators.length != operatorsShow.length" 
                  role="radio" class="el-radio hoverLabelColor"
                  style="width: 120px; margin: 20px 85%;" 
                  @click="showOperatorMore">
                  more...</label>
              </el-checkbox-group>
              <!-- <el-select v-model="aggregateForm.operator" placeholder="选择集结算子">
                <el-option v-for="item in operators" :key="item" :label="item" :value="item"></el-option>
              </el-select> -->
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <!-- 导入数据 -->
      <el-tab-pane name="2">
        <span slot="label"><i class="el-icon-user"></i> 数据</span>
        <div class="borderSingle singlePadding">
          <h3>导入数据</h3>
          <el-form ref="form" :model="aggregateForm" label-width="80px">
            <el-form-item label="">
              <el-radio-group v-model="radio1" size="medium">
                <el-radio-button label="手动输入数据"></el-radio-button>
                <el-radio-button label="从Excel中导入数据"></el-radio-button>
                <el-radio-button label="从大数据中导入数据(暂未开发)" disabled></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="radio1 == '手动输入数据'">
              <el-input
                style="width:600px;"
                type="textarea" :autosize="{ minRows: 5, maxRows: 5}" placeholder="请输入内容"
                v-model="aggregateForm.importData">
              </el-input>
            </el-form-item>
            <el-form-item v-if="radio1 == '从Excel中导入数据'">
              <el-upload
                name="excel" action="http://127.0.0.1:8000/api/excel"
                :limit="1" :drag='true' :show-file-list='true' :auto-upload='true'
                :before-upload="beforeUpload" :on-exceed="handleExceed" :on-success="uploadSuccess" :on-error="uploadFalse">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>

      <!-- 得分函数 -->
      <el-tab-pane name="3">
        <span slot="label"><i class="el-icon-user"></i>得分函数</span>
        <div class="borderSingle singlePadding">
          <h3>得分函数</h3>
          <el-form ref="form" :model="aggregateForm" label-width="85px" :inline="true">
            <el-form-item label="">
              <el-radio-group v-model="aggregateForm.scoreFun">
                <el-radio v-for="item in scoreFunsShow" :key="item" :label="item" :value="item" style="width:250px;margin:5px 0"></el-radio>
                <label 
                v-if="scoreFuns.length != scoreFunsShow.length" 
                role="radio" class="el-radio hoverLabelColor"
                style="width: 120px; margin: 20px 85%;" 
                @click="showScoreMore">
                more...</label>
              </el-radio-group>
              <!-- <el-select v-model="aggregateForm.scoreFun" placeholder="选择得分函数">
                <el-option v-for="item in scoreFuns" :key="item" :label="item" :value="item"></el-option>
              </el-select> -->
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>

      <!-- 参数设置 -->
      <el-tab-pane name="4">
        <span slot="label"><i class="el-icon-user"></i>参数设置</span>
        <div class="borderSingle singlePadding">
          <h3>参数设置</h3>
          <el-form ref="form" :model="aggregateForm" label-width="80px" :inline="true">
            <!-- q值范围 -->
            <el-form-item label="q值范围" style="margin-right:10%">
              <el-input style="width:160px" v-model="aggregateForm.QMin" placeholder="q值最小值"></el-input>
              <span>  ~  </span>
              <el-input style="width:160px" v-model="aggregateForm.QMax" placeholder="q值最大值"></el-input>
            </el-form-item>
            <!-- 其他参数 -->
            <el-form-item label="其他参数">
              <el-input v-model="aggregateForm.otherParameter" placeholder="空格作为参数见的间隔"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>

      <!-- 集结矩阵 -->
      <el-tab-pane name="5" :disabled="tabState">
        <span slot="label"><i class="el-icon-user"></i>集结矩阵</span>
        <div class="borderSingle singlePadding">
          <h3>集结矩阵</h3>
          <el-table :data="aggregationMatrix" max-height="60vh">
            <el-table-column fixed type="index" ></el-table-column>
            <el-table-column 
              class="oneLine" 
              v-for="i in Object.keys(aggregationMatrix[0]).length" :key="i" :prop="'X'+i" :label="'X'+i" 
              show-overflow-tooltip width="150">
              <template slot-scope="scope">
                <span>{{ scope.row['X' + i]}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 最后得分/得分排序 -->
      <el-tab-pane name="6" :disabled="tabState">
        <span slot="label"><i class="el-icon-user"></i>最后得分</span>
        <!-- 最后得分 -->
        <div class="borderSingle singlePadding" >
          <h3>最后得分</h3>
          <el-table :data="finalScore" height="300" max-height="300">
            <el-table-column v-if="tabsName == '9'" fixed type="index" :index="Number(aggregateForm.QMin)"></el-table-column>
            <el-table-column 
              class="oneLine"
              v-for="i in Object.keys(finalScore[0]).length" :key="i" :prop="'X'+i" :label="'X'+i" 
              show-overflow-tooltip width="150">
              <template slot-scope="scope">
                <span>{{ scope.row['X' + i]}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 得分排序 -->
        <div class="borderSingle  singlePadding" >
          <h3>得分排序</h3>
          <el-table :data="finalScoreSort" height="300" max-height="300">
            <el-table-column v-if="tabsName == '9'" fixed type="index" :index="Number(aggregateForm.QMin)"></el-table-column>
            <el-table-column 
              class="oneLine"
              v-for="i in Object.keys(finalScoreSort[0]).length" :key="i" :prop="String(i)" :label="String(i)" 
              show-overflow-tooltip width="150">
              <template slot-scope="scope">
                <span>{{ scope.row[i - 1]}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- 图表展示 -->
      <el-tab-pane name="7" :disabled="tabState">
        <span slot="label"><i class="el-icon-user"></i>图表展示</span>
            <div class="borderSingle  singlePadding" >
              <h3>图表展示</h3>
              <LineChart v-if="tabsName == '7' && showChart == '二维'" v-bind="{finalScore: finalScore, QMin: aggregateForm.QMin}" />
              <LineChart3D v-if="tabsName == '7' && showChart == '三维'" />
              <RadarChart v-if="tabsName == '7' && showChart == '雷达'" v-bind="{finalScore: finalScore, QMin: aggregateForm.QMin}" />
              <el-button-group>
                <el-button @click="showChart = '二维'">二维</el-button>
                <el-button @click="showChart = '三维'">三维</el-button>
                <el-button @click="showChart = '雷达'">雷达</el-button>
              </el-button-group>
            </div>
      </el-tab-pane>
    </el-tabs>
    <div v-if="tabsName == 0" class="singlePadding btnCenter"><el-button type="primary" @click="next">下一步</el-button></div>
    <div v-else-if="tabsName < 4" class="singlePadding btnCenter">
      <el-button-group>
        <el-button @click="back" type="primary" icon="el-icon-arrow-left">上一步</el-button>
        <el-button @click="next" type="primary">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
    </div>
    <div v-else-if="tabsName == 4" class="singlePadding btnCenter"><el-button type="primary" @click="aggregate">开始集结</el-button></div>
    <div v-else-if="tabsName < 7" class="singlePadding btnCenter">
      <el-button-group>
        <el-button @click="back" type="primary" icon="el-icon-arrow-left">上一页</el-button>
        <el-button @click="next" type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
    </div>
    <div v-else-if="tabsName == 7" class="singlePadding btnCenter"><el-button type="primary" @click="back">上一页</el-button></div>
    <Footer />
  </div>
</template>

<script>
import LineChart from '../../components/lineChart.vue'
import LineChart3D from '../../components/LineChart3D.vue'
import RadarChart from '../../components/radarChart.vue'

import Footer from '../../components/footer.vue'
export default {
  data() {
    return {
      tabsName: "0",
      tabState: true,
      chooseSize:0,
      radio1: '手动输入数据',
			radio2: '选择方法',
			radio3: '选择方法',
      showChart: '二维',
			active: 0,
			aggregateForm: {
				excelName: '',	// 上传表格文件名
				importData: '',	// 手动输入数据
				operator: '',	// 算子
        combineOperators:[],//融合算子s
				decision: '', // 决策方法
				QMin: '',	// Q最小值
				QMax: '',	// Q最大值
				otherParameter: '', // 其他参数 通过空格区分
				scoreFun: '', // 得分函数
				expertWeight: '',	// 专家权重
				attributeWeight: '',	// 属性权重
			},

			operators: [''],
      operatorsShow: [''],
			decisions: [''],
			DisClos: [{
				label: '距离公式',
				options: ['距离公式1', '距离公式2', '距离公式3', '距离公式4'],
			},{
				label: '贴进度公式',
				options: ['贴进度公式1', '贴进度公式2', '贴进度公式3', '贴进度公式4'],
			}],
			scoreFuns: [''],
      scoreFunsShow:[''],
			expertWeightMethods: ['EW1', 'EW2', 'EW3', 'EW4'],
			attributeWeightMethods: ['AW1', 'AW2', 'AW3', 'AW4'],
			demoExpertWeight: 
				"例：[[0.2,0.2,0.2,0.2,0.2],	\
				 		  [0.2,0.2,0.2,0.2,0.2],	\
				 			[0.2,0.2,0.2,0.2,0.2],	\
				 			[0.2,0.2,0.2,0.2,0.2],	\
				 			[0.2,0.2,0.2,0.2,0.2]]",
			demoAttributeWeight: '例：[0.2,0.2,0.2,0.2,0.2]',

			aggregationMatrix: [''],
			finalScore:[''],
      finalScoreSort:['']
    };
  },
  components:{
    LineChart, LineChart3D, RadarChart, Footer
  },
	mounted() {
    this.getMethodName()
  },
	methods: {  
    async getMethodName(){
      let res = await this.sendGetMethodNameRespose() 
      if (res.data.msg != 'success') {
				this.$message.error(res.data.msg);
				return
			}
      // console.log(res);
      await this.enterMethodData(res)
    },
    async sendGetMethodNameRespose(){
      return await this.$axios.get('http://127.0.0.1:8000/api/getMethodName')
    },
    enterMethodData(res){
      this.operators = []
      this.operatorsShow = []
      this.decisions = []
      this.operators = res.data.operatorName
      for(let i = 0; i < 20; i++){
        this.operatorsShow.push(this.operators[i].length < 20 ? this.operators[i] : this.operators[i].replace(/[a-z]+/g,""))
      }

      this.decisions = res.data.decisionMethon

      this.scoreFuns = res.data.scoreName
      this.scoreFunsShow =[]
      for(let i = 0; i < 20; i++){
        this.scoreFunsShow.push(this.scoreFuns[i].length < 20 ? this.scoreFuns[i] : this.scoreFuns[i].replace(/[a-z]+/g,""))
      }
    },

    async aggregate(){
			let res = await this.sendAggregateRespose()
			if (res.data.msg != 'success') {
				this.$message.error(res.data.msg);
				return
			}
			console.log(res);
			await this.renderData(res)
			if (res.data.msg == "success") {
        this.tabState = false
				this.next()
			}
		},
		async sendAggregateRespose(){
      //this.aggregateForm.operator = this.operators[this.operatorsShow.indexOf(this.aggregateForm.operator)]
      
			return await this.$axios.get('http://127.0.0.1:8000/api/directAggregate?body=' + JSON.stringify(this.aggregateForm))
		},
		renderData(res){
			// 集结矩阵
			this.aggregationMatrix = []
			let arr_x = res.data.aggregationMatrix.substring(3, res.data.aggregationMatrix.length - 2).split('], [(')
			for (let i = 0; i < arr_x.length; i++) {
				let aggregationObj = {}
				let arr_y = arr_x[i].substring(0, arr_x[i].length).split(', (')	
				for (let j = 0; j < arr_y.length; j++) {
					aggregationObj['X' + (j + 1)] = '(' + arr_y[j]
				}
				this.aggregationMatrix.push(aggregationObj)
			}
			// console.log('aggregationMatrix', this.aggregationMatrix);

			// 最终得分
			this.finalScore = []
			for (let i = 0; i < res.data.finalScore.length; i++) {
				let finalScoreObj = {}
				for (let j = 0; j < res.data.finalScore[0].length; j++) {
					finalScoreObj['X' + (j + 1)] = res.data.finalScore[i][j]
				}
				this.finalScore.push(finalScoreObj)
			}
			// console.log(this.finalScore);

      // 得分排序
      console.log(res.data.finalScore);
      this.finalScoreSort = []
			for (let i = 0; i < res.data.finalScore.length; i++) {
        let finalScoreSortArr = []
				let temp = res.data.finalScore[i].concat()
        temp.sort((a, b) => a - b)
				for (let j = 0; j < res.data.finalScore[0].length; j++) {
					finalScoreSortArr.push('X' +  (Number(res.data.finalScore[i].indexOf(temp[j])) + 1))
				}
				this.finalScoreSort.push(finalScoreSortArr)
			}
      // console.log(this.finalScoreSort);
		},

    showOperatorMore(){
      let oLen = this.operators.length
      let osLen = this.operatorsShow.length
      let len = oLen - osLen > 20 ? 20 : oLen - osLen

      for (let i = 0; i < len; i++) {
        // console.log(osLen + i, this.operators[osLen + i]);
        this.operatorsShow.push(this.operators[osLen + i].length < 20 ? this.operators[osLen + i] : this.operators[osLen + i].replace(/[a-z]+/g,""))
      }
      // console.log(this.operatorsShow);
    },
    showScoreMore(){
      let oLen = this.scoreFuns.length
      let osLen = this.scoreFunsShow.length
      let len = oLen - osLen > 20 ? 20 : oLen - osLen

      for (let i = 0; i < len; i++) {
        // console.log(osLen + i, this.operators[osLen + i]);
        this.scoreFunsShow.push(this.scoreFuns[osLen + i].length < 20 ? this.scoreFuns[osLen + i] : this.scoreFuns[osLen + i].replace(/[a-z]+/g,""))
      }
      // console.log(this.operatorsShow);
    },
    groupChange(){
      if (this.aggregateForm.combineOperators.length >2) {
        this.aggregateForm.combineOperators.shift();
      }
    },
    beforeUpload(file) {
      let hz = file.name.split(".")[1]
      if (hz != 'xlsx' && hz != 'xls') {
				this.$message.warning('请上传xlsx/xls格式的文件!')
        return false;
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`)
    },
		uploadSuccess(response, file, fileList) {
			// console.log(response)
			this.aggregateForm.excelName = response.excelName
		},
    uploadFalse(response, file, fileList) {
			// console.log(response);
      this.$message.error('excel文件上传失败!');
    },

    back(){
      this.tabsName = String(Number(this.tabsName) - 1)
    },
    next(){
      this.tabsName = String(Number(this.tabsName) + 1)
    }
	}
}
</script>

<style>
.aggregatePage{
    width: 100%;
    height: 100%;
}
.el-upload-dragger{
	height: 117px;
	overflow: inherit;
}
.el-upload-dragger .el-icon-upload{
	margin: 10px 0 6px
}
.el-tabs{
  min-height: calc(100% - 150px);
}
h5 {
	padding: 10px 0 5px 10px;
	margin: 0;
}
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.el-aside, .el-main {
  height: calc(100vh - 60px);
}
.borderSingle{
	border: 1px solid #ccc; 
	border-radius: 4px;
}
.singlePadding{
	margin: 10px 10%;
}
.btnCenter{
	display: flex;
	justify-content: center;
}
.hoverLabelColor:hover{
  color:#50b7c1;
}
</style>